<template>
  <div>
    <a-modal v-model:open="open" :title="title" @ok="handleOk" @cancel="handleCancel">
      <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        v-bind="layout"
      >
        <a-form-item ref="account" label="用户账号" name="account">
          <a-input v-model:value="formState.account" />
        </a-form-item>
        <a-form-item ref="name" label="用户姓名" name="name">
          <a-input v-model:value="formState.name" />
        </a-form-item>
        <a-form-item label="角色名称" name="role">
          <a-select v-model:value="formState.role" placeholder="请选择角色">
            <a-select-option value="管理员">管理员</a-select-option>
            <a-select-option value="非管理员">非管理员</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="手机号码" required name="phone">
          <a-input v-model:value="formState.phone" />
        </a-form-item>
        <a-form-item label="组织架构" name="organization">
          <a-select v-model:value="formState.organization" placeholder="请选择组织">
            <a-select-option value="运营部">运营部</a-select-option>
            <a-select-option value="人事部">人事部</a-select-option>
            <a-select-option value="研发部">研发部</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="账号状态" name="status">
            <a-switch 
              v-model:checked="formState.status" 
              checked-children="开启" 
              un-checked-children="关闭" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { FormInstance } from 'ant-design-vue';
import { Rule } from 'ant-design-vue/es/form';
import { reactive, ref, watch } from 'vue';
import { defineProps, defineEmits } from 'vue';

interface DataItem {
  id: number;
  account: string;
  name: string;
  role: string;
  phone: string;
  organization: string;
  status: boolean;
}

interface ModalProp {
  title: string
  open: boolean
  initalValues: DataItem
}

const props = defineProps<ModalProp>()
const open = ref<boolean>(false);
const formState = reactive<DataItem>({
  ...props.initalValues
});

watch(
    () => [props.open, props.initalValues],
    ([value, data]) => {
        open.value = value as boolean,
        Object.assign(formState, data)
    }
)

const emit = defineEmits(['submit', 'cancel'])
const formRef = ref<FormInstance>()
const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 16 },
}

const rules: Record<string, Rule[]> = {
  name: [
    { required: true, message: '请输入有效名称', trigger: 'change' },
    { min: 2, max: 5, message: '2-5个字', trigger: 'blur' },
  ],
};

const handleOk = async () => {
  try {
    await formRef.value?.validate()
    emit('submit', { ...formState })
  }catch(error){
    console.log(error);
    
  }
};

const handleCancel = () => {
  formRef.value?.resetFields()
  emit('cancel')
}

</script>

